<template>
    <div class="SortAllList">
        <div class="SortAllList-1">
            <div class="SortAllList-left">
                <van-sidebar v-model="activeKey">
                    <van-sidebar-item title="时令水果" @click="tem='HomeErA'"/>
                    <van-sidebar-item title="蔬果鲜花" @click="tem='HomeErB'"/>
                    <van-sidebar-item title="肉禽蛋品" @click="tem='HomeErC'"/>
                    <van-sidebar-item title="海鲜水产" @click="tem='HomeErD'"/>
                </van-sidebar>
            </div>
            <component :is="tem"></component>
            <div class="SortAllList-right">

            </div>
        </div>
    </div>  
</template>


<script>
import SortAllErA from "@/components/SortAll/SortAllEr/SortAllErA.vue"
import SortAllErB from "@/components/SortAll/SortAllEr/SortAllErB.vue"
import SortAllErC from "@/components/SortAll/SortAllEr/SortAllErC.vue"
import SortAllErD from "@/components/SortAll/SortAllEr/SortAllErD.vue"
export default {
    comments:{
        SortAllErA,
        SortAllErB,
        SortAllErC,
        SortAllErD
    },
    data() {
        return {
            activeKey: 0,
            tem: SortAllErA
        }
    }
}
</script>

<style scoped>

/* .sidebar-text-color{
    color: pink;
}
.sidebar-active-color{
    color:pink;
} */
.SortAllList-right-list-1{
    width: 33.33%;
    margin-bottom:.24rem;
}
.SortAllList-right-list{
    display: flex;
    flex-wrap: wrap;
    text-align: center;
}
.SortAllList-right p{
    font-size: .13rem;
    color: #666666;
    margin-top:.15rem;
}
.SortAllList-right img{
    width: .55rem;
    height: .55rem;
    object-fit: cover;
    margin: 0 auto;
}
.SortAllList-left{
    width: 23%;
}
.SortAllList-right{
    width: 77%;
    padding-top:.14rem;
}
.SortAllList-1{
    display: flex;
    justify-content: space-between;
}
</style>